<template>
  <div class="form-design-setting-container">
    <el-form label-width="100px" label-position="left">
      <el-tabs v-model="tabs1">
        <el-tab-pane label="题目设置" name="1">
          <el-form-item label="是否必填">
            <el-checkbox v-model="formComponent.require" label="必填" />
          </el-form-item>
          <el-form-item label="宽度设置">
            <el-select v-model="formComponent.width" placeholder="请选择">
              <el-option v-for="item in topicOptions.widthOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="tabs2">
        <el-tab-pane label="选项设置" name="1">
          <el-form-item label="可选选项数量">
            <div class="cell-link" @click="changeSelectNum">
              {{selectNumLabel}}<el-icon>
                <ArrowRight />
              </el-icon>
            </div>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <el-dialog v-model="dialogVisible" title="可选选项数量限制" width="30%" align-center>
      <div class="dialog-content">
        <div class="form-label">最少需选数量</div>
        <el-select v-model="formComponent.minSelect" placeholder="请选择">
          <el-option v-for="item in checkboxOptions.selectMinOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <div class="form-label">最多可选数量</div>
        <el-select v-model="formComponent.maxSelect" placeholder="请选择">
          <el-option v-for="item in checkboxOptions.selectMaxOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { defineProps, ref, computed } from 'vue'
import { topicOptions, checkboxOptions } from "@/views/form/manage/design/config/formCmpConfig.js";
import { ArrowRight } from '@element-plus/icons-vue'
const props = defineProps({
  formComponent: {
    type: Object,
  },
})
const formComponent = computed(() => { return props.formComponent })
const tabs1 = ref('1')
const tabs2 = ref('1')
//可选项数量调整
const dialogVisible = ref(false)
const selectNumLabel = computed(() => {
  let result
  let minItem = checkboxOptions.selectMinOptions.filter(item => item.value == formComponent.value.minSelect)[0]
  let maxItem = checkboxOptions.selectMaxOptions.filter(item => item.value == formComponent.value.maxSelect)[0]
  if (minItem.value === 0 && maxItem.value === 999) {
    result = "不限制";
  } else if (minItem.value === 0) {
    result = `最多${maxItem.label}`;
  } else if (maxItem.value === 0) {
    result = `最少${minItem.label}`;
  } else {
    result = `最少${minItem.label}，最多${maxItem.label}`;
  }
  return result
})
const changeSelectNum = () => {
  dialogVisible.value = true
}

</script>
<style lang="scss" scoped>
.cell-link{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding: 0 5px;
  color: #606266;
  cursor: pointer;
  .el-icon{
    margin-left: 10px;
  }
}
.dialog-content{
  .form-label{
    margin: 20px 0;
  }
  .el-select{
    width: 100%;
  }
}
</style>